<template>
  <layout title="tag标签">
    <layout-content title="基础使用">
      <tn-tag :custom-style="customTagStyle">标签</tn-tag>
      <tn-tag shape="round" :custom-style="customTagStyle">标签</tn-tag>
      <tn-tag shape="elliptic" :custom-style="customTagStyle">标签</tn-tag>
      <tn-tag shape="leftCircle" :custom-style="customTagStyle">标签</tn-tag>
      <tn-tag shape="rightCircle" :custom-style="customTagStyle">标签</tn-tag>
    </layout-content>

    <layout-content title="设置尺寸">
      <tn-tag size="sm" :custom-style="customTagStyle">标签</tn-tag>
      <tn-tag :custom-style="customTagStyle">默认</tn-tag>
      <tn-tag size="lg" :custom-style="customTagStyle">标签</tn-tag>
      <tn-tag size="xl" :custom-style="customTagStyle">标签</tn-tag>
      <view class="tn-margin-top-sm">
        <tn-tag shape="round" size="sm" :custom-style="customTagStyle">标签</tn-tag>
        <tn-tag shape="round" :custom-style="customTagStyle">默认</tn-tag>
        <tn-tag shape="round" size="lg" :custom-style="customTagStyle">标签</tn-tag>
        <tn-tag shape="round" size="xl" :custom-style="customTagStyle">标签</tn-tag>
      </view>
      <view class="tn-margin-top-sm">
        <tn-tag shape="elliptic" size="sm" :custom-style="customTagStyle">标签</tn-tag>
        <tn-tag shape="elliptic" :custom-style="customTagStyle">默认</tn-tag>
        <tn-tag shape="elliptic" size="lg" :custom-style="customTagStyle">标签</tn-tag>
        <tn-tag shape="elliptic" size="xl" :custom-style="customTagStyle">标签</tn-tag>
      </view>
      <view class="tn-margin-top-sm">
        <tn-tag shape="leftCircle" size="sm" :custom-style="customTagStyle">标签</tn-tag>
        <tn-tag shape="leftCircle" :custom-style="customTagStyle">默认</tn-tag>
        <tn-tag shape="leftCircle" size="lg" :custom-style="customTagStyle">标签</tn-tag>
        <tn-tag shape="leftCircle" size="xl" :custom-style="customTagStyle">标签</tn-tag>
      </view>
      <view class="tn-margin-top-sm">
        <tn-tag shape="rightCircle" size="sm" :custom-style="customTagStyle">标签</tn-tag>
        <tn-tag shape="rightCircle" :custom-style="customTagStyle">默认</tn-tag>
        <tn-tag shape="rightCircle" size="lg" :custom-style="customTagStyle">标签</tn-tag>
        <tn-tag shape="rightCircle" size="xl" :custom-style="customTagStyle">标签</tn-tag>
      </view>
      <view class="tn-margin-top-sm">
        <tn-tag width="100rpx" height="40rpx" :custom-style="customTagStyle">标签</tn-tag>
        <tn-tag width="100rpx" height="46rpx" font-bold :custom-style="customTagStyle">标签</tn-tag>
        <tn-tag font-size="40rpx" :custom-style="customTagStyle">标签</tn-tag>
      </view>
    </layout-content>

    <layout-content title="设置颜色">
      <tn-tag type="primary" :custom-style="customTagStyle">标签</tn-tag>
      <tn-tag type="success" :custom-style="customTagStyle">标签</tn-tag>
      <tn-tag type="warning" :custom-style="customTagStyle">标签</tn-tag>
      <tn-tag type="danger" :custom-style="customTagStyle">标签</tn-tag>
      <tn-tag type="info" :custom-style="customTagStyle">标签</tn-tag>
      <view class="tn-margin-top-sm">
        <tn-tag bg-color="tn-bg-cyan" :custom-style="customTagStyle">标签</tn-tag>
        <tn-tag bg-color="tn-bg-green--light" color="tn-color-indigo" :custom-style="customTagStyle">标签</tn-tag>
        <tn-tag bg-color="tn-cool-bg-6" :custom-style="customTagStyle">标签</tn-tag>
      </view>
    </layout-content>

    <layout-content title="设置边框">
      <tn-tag plain border type="primary" :custom-style="customTagStyle">标签</tn-tag>
      <tn-tag plain border type="success" :custom-style="customTagStyle">标签</tn-tag>
      <tn-tag plain border type="warning" :custom-style="customTagStyle">标签</tn-tag>
      <tn-tag plain border type="danger" :custom-style="customTagStyle">标签</tn-tag>
      <tn-tag plain border type="info" :custom-style="customTagStyle">标签</tn-tag>
      <view class="tn-margin-top-sm">
        <tn-tag plain border border-color="tn-border-aquablue" color="tn-color-aquablue" :custom-style="customTagStyle">标签</tn-tag>
        <tn-tag plain border border-bold border-color="tn-border-aquablue" color="tn-color-aquablue" :custom-style="customTagStyle">标签</tn-tag>
      </view>
    </layout-content>

    <layout-content title="设置阴影">
      <tn-tag shadow type="primary" :custom-style="customTagStyle">标签</tn-tag>
      <tn-tag shadow type="success" :custom-style="customTagStyle">标签</tn-tag>
      <tn-tag shadow type="warning" :custom-style="customTagStyle">标签</tn-tag>
      <tn-tag shadow type="danger" :custom-style="customTagStyle">标签</tn-tag>
      <tn-tag shadow type="info" :custom-style="customTagStyle">标签</tn-tag>
      <view class="tn-margin-top-sm">
        <tn-tag shadow bg-color="tn-bg-aquablue" shadow-color="tn-shadow-aquablue--light" :custom-style="customTagStyle">标签</tn-tag>
      </view>
    </layout-content>

    <layout-content title="使用示例">
      <view class="tn-flex-row tn-flex-wrap">
        <view
          v-for="(item, index) in tags"
          :key="index"
          class="tags__item tn-margin-right-sm tn-margin-top-sm"
        >
          <tn-tag shape="round">
            <view class="tags__data tn-flex-row tn-flex-center-between">
              <view class="tags__value">{{ item }}</view>
              <view class="tags__close"><tn-icon icon="close" @tap.stop="openRemoveModal(index)"></tn-icon></view>
            </view>
          </tn-tag>
        </view>
        <view class="tags__item tn-margin-right-sm tn-margin-top-sm">
          <tn-tag shape="round" plain border border-color="#E6E6E6" color="#E6E6E6" width="100" @click="openTagPopup">
            <view class="tags__add">
              <tn-icon icon="add"></tn-icon>
            </view>
          </tn-tag>
        </view>
      </view>
    </layout-content>
  </layout>

  <tn-popup v-model="showAddTagPopup" mode="center" width="60%" close-icon="" :mask-closeable="false" bg-color="transparent">
    <view class="tags__modal tn-flex-center tn-flex-column tn-col-12">
      <view>请输入标签值</view>
      <view class="tn-col-12 tn-margin-top-sm">
        <tn-input v-model="tagValue" placeholder="请输入标签名"></tn-input>
      </view>
      <view class="tn-flex-col-between tn-col-12 tn-margin-top-sm">
        <view><tn-button size="lg" type="danger" @click="closeAddTagPopup">取消</tn-button></view>
        <view><tn-button size="lg" @click="addTag">确认</tn-button></view>
      </view>
    </view>
  </tn-popup>

  <tn-modal v-model="showRemoveModal" show-cancel :data="removeModalData" @confirm="removeTag"></tn-modal>

  <layout-doc v-model="showDoc" :content="docContent"></layout-doc>
  <doc-fab @click="handleDocFabClick"/>
</template>

<script lang="ts" setup>
import { ref, CSSProperties } from 'vue'
import { docContent } from './lib/doc'
import Layout from '@/components/layout/index.vue'
import LayoutContent from '@/components/layout/content.vue'
import LayoutDoc from '@/components/layout/doc.vue'
import DocFab from '@/components/doc-fab/index.vue'

import TnTag from '@/tuniao-ui/components/tn-tag/src/Tag.vue'
import TnIcon from '@/tuniao-ui/components/tn-icon/src/Icon.vue'
import TnPopup from '@/tuniao-ui/components/tn-popup/src/Popup.vue'
import TnModal from '@/tuniao-ui/components/tn-modal/src/Modal.vue'
import TnInput from '@/tuniao-ui/components/tn-input/src/Input.vue'
import TnButton from '@/tuniao-ui/components/tn-button/src/Button.vue'

// 自定义tag演示
const customTagStyle: CSSProperties = {
  marginRight: '20rpx',
  marginTop: '20rpx',
}

// 弹出文档 
let showDoc = ref<boolean>(false)
const handleDocFabClick = () => {
  showDoc.value = true
}

// 标签数据
let tags = ref<string[]>(['图鸟UI', '杠杠的好用'])
// 添加标签
let tagValue = ref<string>('')
const addTag = () => {
  if (tagValue.value === '') return
  tags.value.push(tagValue.value)
  tagValue.value = ''
  showAddTagPopup.value = false
}
let showAddTagPopup = ref<boolean>(false)
const openTagPopup = () => {
  showAddTagPopup.value = true
}
const closeAddTagPopup = () => {
  showAddTagPopup.value = false
}

// 移除标签
let currentSelectTagIndex: number = -1
const removeTag = () => {
  tags.value.splice(currentSelectTagIndex, 1)
  currentSelectTagIndex = -1
}
let showRemoveModal = ref<boolean>(false)
let removeModalData: Record<string, any> = {
  title: '操作提示',
  content: '确定需要删除该标签吗?'
}
const openRemoveModal = (index: number) => {
  currentSelectTagIndex = index
  showRemoveModal.value = true
}

</script>

<style lang="scss" scoped>

.tags {
  &__close {
    position: relative;
    margin-left: 10rpx;
    line-height: 1;
  }
  &__add {
    position: relative;
    line-height: 1;
  }
  &__modal {
    background-color: #FFFFFF;
    padding: 30rpx;
    border-radius: 10rpx;
  }
}
</style>
